<template>
  <div class="copyright-box" :class="{ 'copyright-box-loop': route.meta.loopType }">
    <div v-if="types" style="width: 100%">
      <t-row>
        <t-col :span="6">
          <div class="title">
            <titles title="学术研究" />
          </div>
        </t-col>
        <t-col :span="6">
          <div class="right-box">
            <t-popup content="" placement="bottom">
              <template #content>
                <div class="pop-box">
                  <div class="pop-item hw-click-cursor" @click="setTypeId(0)">全部</div>
                  <div
                    class="pop-item hw-click-cursor"
                    @click="setTypeId(item)"
                    v-for="item in selectList"
                    :key="item.id"
                  >
                    {{ item.text }}
                  </div>
                  <!-- <div class="pop-item hw-click-cursor">论著</div>
                    <div class="pop-item hw-click-cursor">展览</div> -->
                </div>
              </template>
              <div class="pop-heard">
                <span>{{ TypeTitle }}</span>
                <t-icon name="chevron-down" size="24"></t-icon>
              </div>
            </t-popup>
          </div>
        </t-col>
      </t-row>
      <t-row>
        <t-col :span="12" v-for="item in list" :key="item.id" @click="pathInfo(item.id)">
          <div class="item-box">
            <div class="item-left">
              <div class="title1">
                <p
                  class="title1-color"
                  :style="{ fontFamily: store.styleInfo.fontFamily, color: store.styleInfo.themeColor }"
                >
                  【
                  {{
                    item.typeId == 401792425939013
                      ? '课题研究'
                      : item.typeId == 401792277585989
                      ? '出版刊物'
                      : '论文论著'
                  }}】
                </p>
                <p :style="{ fontFamily: store.styleInfo.fontFamily }">{{ item.name }}</p>
              </div>
              <span class="title2">{{ item.createDate }}</span>
            </div>
            <div class="item-right">
              <p class="title3" :style="{ fontFamily: store.styleInfo.fontFamily }">{{ item.author }} 编</p>
              <span class="title4">{{ item.publisher }}</span>
            </div>
          </div>
        </t-col>
      </t-row>
      <t-row style="margin-top: 50px">
        <t-col :span="12">
          <t-pagination
            v-model="parmas.pageNo"
            v-model:pageSize="parmas.pageSize"
            :total="total"
            :showPageSize="false"
            show-jumper
            @change="onChange"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </t-col>
      </t-row>
    </div>
    <researchInfo v-else />
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { treeList } from '@/api/user/user';
import heardTitle from './heardTitle.vue';
import titles from '@/components/title/title.vue';
import { investigationList } from '@/api/investigation/investigation';
import researchInfo from './researchInfo.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const current = ref(1);
const pageSize = ref(20);
const types = ref(true);
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 8,
  typeId: 0,
});
const TypeTitle = ref('全部');
const selectList = ref([]);
const list = ref([]);
const total = ref(0);
const loading = ref(false);

const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationList(localStorage.getItem('projectId'), parmas);
    total.value = res.data.total;
    list.value = res.data.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
init();
const getSelectList = async () => {
  let res = await treeList(395711118516293); //级别
  selectList.value = res.data;
};
getSelectList();
const setTypeId = (e: any) => {
  if (e === 0) {
    parmas.typeId = 0;
    TypeTitle.value = '全部';
  } else {
    parmas.typeId = e.id;
    TypeTitle.value = e.text;
  }
  init();
};
const onPageSizeChange = (size) => {
  // console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
  init();
};

const onCurrentChange = (index, pageInfo) => {
  // MessagePlugin.success(`转到第${index}页`);
  // console.log(pageInfo);
  init();
};

const onChange = (pageInfo) => {
  // console.log(pageInfo);
};
const pathInfo = (e: number) => {
  router.push({
    path: route.meta.loopType ? pathListLoop[4] : pathList[4],
    query: {
      projectId: localStorage.getItem('projectId'),
      id: e,
    },
  });
};
</script>

<style lang="less" scoped>
.copyright-box {
  padding: 80px 0px;
  width: 1180px;
  margin: 0 auto;
  min-height: calc(@screen-hw-div-parent - 138px);
}
.copyright-box-loop {
  min-height: calc(@screen-hw-div-parent-btn-loop - 138px);
}
.right-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 100px;
}
.title {
  display: flex;
  justify-content: left;
  align-items: center;
  // margin-top: 50px;
}
.item-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 24px;
}
.item-left {
  display: flex;
  flex-direction: column;
}
.item-right {
  display: flex;
  flex-direction: column;
}
.title1 {
  display: flex;
  font-size: 17px;
  font-weight: bold;
  color: #333333;
  line-height: 32px;
}
.title1-color {
  color: #c7ab8b;
}
.title2 {
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #999999;
  line-height: 26px;
}
.title3 {
  font-size: 17px;
  font-weight: 500;
  color: #333333;
  line-height: 32px;
}
.title4 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 26px;
}
.pop-heard {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.pop-item:hover {
  background: #f0e9e1;
  color: rgba(210, 173, 119, 0.9);
}
</style>
